<template>
  <div :style="styleItem">
    <!-- :style="{height: styleItem.height, width: styleItem.width}" -->
    <div id="BoxStatusCharts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "BoxStatusCharts",
  props: {
    styleItem: {
      type: Object,
      default: () => {},
    },
    boxStatusData: {
      type: Array,
      default: () => [],
    },
    xData: {
      type: Array,
      default: () => [],
    },
    data1: {
      type: Array,
      default: () => [],
    },
    boxTotal: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      myChart: null,
    };
  },
  mounted() {
    this.showChart();
  },
  methods: {
    reloadChart() {
      console.log("reloadChart重庆哦3/333333", this.styleItem);
      this.myChart.clear();
      this.showChart();
    },
    showChart() {
      // 窍状态
      //   if (this.myChart != null && this.myChart != "" && this.myChart != "undefined") {
      //     this.myChart.clear();
      //     // console.log(legenddata, valuedata);
      //     //   this.myChart.clear();
      //   }
      // 基于准备好的dom，初始化echarts实例

      let chartDom = document.getElementById("BoxStatusCharts");
      this.myChart = echarts.init(chartDom);

      //   this.myChart = echarts.init(document.getElementById("BoxStatusCharts"));


      var option;
      // var color = ["rgb(0, 255, 94)", "rgb(251, 186, 74)", "rgb(2, 192, 244)"];
      var color = ['#00FF5F', '#02C1F4', '#FBBB4A']
      let trafficWay = this.boxStatusData

      var total = 0;
      for (var i = 0; i < trafficWay.length; i++) {
        total += trafficWay[i].value;
      }

      option = {
        // title: {
        //   text: "Referer of a Website",
        //   subtext: "Fake Data",
        //   left: "center",
        // },
        title: {
          text: `总量`,
          itemGap: this.$fontSize.fontSize(0.1),
          subtextStyle: {
            color: "#fff",
            fontSize: this.$fontSize.fontSize(0.16),
          },
          subtext: this.boxTotal.toString(),
          top: "35%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: this.$fontSize.fontSize(0.14),
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "item",
        },
        color: color,
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        // },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: ["45%", "60%"],
            hoverAnimation: false,
            startAngle: "45", // 
            minAngle: 1, //最小角度
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: color[i],
                  lineHeight: this.$fontSize.fontSize(0.18),
                  fontSize: this.$fontSize.fontSize(0.12),
                  formatter: function(params) {
                    var percent = 0;

                    percent = ((params.value / total) * 100).toFixed(0);
                    if (params.name !== "") {
                      return (
                        "\n" +
                        "\n" +
                        params.name +
                        // ':'+
                        "\n" +
                        // "数量：" +
                        params.value +
                        "\n"
                        // "占比：" +
                        // percent +
                        // "%"
                      );
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  length: this.$fontSize.fontSize(0.2),
                  length2: this.$fontSize.fontSize(0.3),
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: trafficWay,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && this.myChart.setOption(option, true, true);

      //   let trafficWay = [
      //     {
      //       name: "正常存储",
      //       value: 892016
      //     },
      //     {
      //       name: "调阅中",
      //       value: 23640
      //     },
      //     {
      //       name: "销毁中",
      //       value: 69344
      //     }
      //   ];
      //   var data = [];
      //   var color = ["rgb(0, 255, 94)", "rgb(251, 186, 74)", "rgb(2, 192, 244)"];
      //   for (var i = 0; i < trafficWay.length; i++) {
      //     data.push({
      //       value: trafficWay[i].value,
      //       name: trafficWay[i].name
      //     });
      //   }
      //   var total = 0;
      //   for (var i = 0; i < trafficWay.length; i++) {
      //     total += trafficWay[i].value;
      //   }
      //   var seriesOption = [
      //     {
      //       name: "",
      //       type: "pie",
      //       clockWise: false,
      //       radius: ["45%", "60%"],
      //       hoverAnimation: false,
      //       startAngle: "60",
      //       minAngle: 45, //最小角度
      //       itemStyle: {
      //         normal: {
      //           label: {
      //             show: true,
      //             position: "outside",
      //             color: color[i],
      //             lineHeight: this.$fontSize.fontSize(0.18),
      //             fontSize: this.$fontSize.fontSize(0.12),
      //             formatter: function(params) {
      //               var percent = 0;

      //               percent = ((params.value / total) * 100).toFixed(0);
      //               if (params.name !== "") {
      //                 return (
      //                   params.name +
      //                   "\n" +
      //                   "数量：" +
      //                   params.value +
      //                   "\n" +
      //                   "占比：" +
      //                   percent +
      //                   "%"
      //                 );
      //               } else {
      //                 return "";
      //               }
      //             }
      //           },
      //           labelLine: {
      //             length: this.$fontSize.fontSize(0.2),
      //             length2: this.$fontSize.fontSize(0.3),
      //             show: true,
      //             color: "#00ffff"
      //           }
      //         }
      //       },
      //       data: trafficWay
      //     }
      //   ];
      //   this.myChart.setOption(
      //     {
      //       color: color,
      //       title: {
      //         text: `窍总量`,
      //         itemGap: this.$fontSize.fontSize(0.1),
      //         subtextStyle: {
      //           color: "#fff",
      //           fontSize: this.$fontSize.fontSize(0.16)
      //         },
      //         subtext: total,
      //         top: "35%",
      //         textAlign: "center",
      //         left: "49%",
      //         textStyle: {
      //           color: "#fff",
      //           fontSize: this.$fontSize.fontSize(0.14),
      //           fontWeight: "400"
      //         }
      //       },
      //       series: seriesOption
      //     },
      //     true,
      //     true
      //   );

      //   window.addEventListener("resize", function() {
      //     // this.myChart.resize();
      //   });
    },
  },
};
</script>

<style lang="scss">
#BoxStatusCharts {
  width: 100%;
  height: 20vh;
}
</style>
<!--  width: 100%;
  height: 100%; -->
